<template>
	<div class="row">
		<h1 v-if="isFirstView">输入用户名搜索</h1>
		<h1 v-else-if="isLoading">loading...</h1>
		<div v-else>
			<div class="card" v-for="user in users" :key="user.id">
				<a :href="user.html_url" target="_blank">
					<img :src="user.avatar_url" style="width: 100px" />
				</a>
				<p class="card-text">{{ user.login }}</p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "UserList",
	/*
		谁要数据进行展示，就定义在哪个组件

		页面有三种状态：
			1. 输入用户名搜索
			2. loading...
			3. 显示用户列表

		实现：
			1. 定义一个标识 
				status：1 / 2 / 3 分别显示不同的状态
			2. 定义三个不同标识
				isFirstView
				isLoading
				users 
	*/
	data() {
		return {
			isFirstView: true,
			isLoading: false,
			users: [],
		};
	},
	mounted() {
		this.$bus.$on("setLoading", (isLoading) => {
			this.isLoading = isLoading;
			this.isFirstView = false;
		});

		this.$bus.$on("setUsers", (users) => {
			this.users = users;
		});
	},
	beforeDestroy() {
		this.$bus.$off("setLoading");
		this.$bus.$off("setUsers");
	},
};
</script>

<style>
.card {
	float: left;
	width: 33.333%;
	padding: 0.75rem;
	margin-bottom: 2rem;
	border: 1px solid #efefef;
	text-align: center;
}

.card > img {
	margin-bottom: 0.75rem;
	border-radius: 100px;
}

.card-text {
	font-size: 85%;
}
</style>
